import React from 'react'
import SonCom from './SonCom'
import {NavLink} from 'react-router-dom'
class FatherCom extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: '我是父组件的数据',
      num: 666,
      sonInfo: '',
      isShow: true
    }
    this.p3 = React.createRef()
  }
  carFn(val1, val2) {
    // 这个函数就是运输工具
    console.log(val1);
    console.log(val2);
    this.setState({
      sonInfo: val2
    })
  }
  showNum() {
    console.log(666);
  }
  addNum() {
    // 点击数字加1
    this.setState({
      num: this.state.num + 1
    })
  }
  // 切换子组件的显示隐藏
  toggleSonCom() {
    this.setState({
      isShow: !this.state.isShow
    })
  }
  componentWillMount() {
    // 发请求获取数据
    console.log('1','componentWillMount', '组件将要渲染');
    console.log(this.state);
    this.showNum();
  }
  componentDidMount() {
    console.log(this.el);
    console.log(this.p3);
    // console.log(this.refs.soncom);
    console.log('3','componentDidMount', '组件完成渲染');
    console.log(this.state);
    this.showNum();
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('4','shouldComponentUpdate', '组件是否更新');
    console.log(nextProps, nextState);
    console.log(this.state);
    return true
    // if(Math.abs(nextState.num - this.state.num)>10) {
    //   return true
    // }else {
    //   return false
    // }
  }
  componentWillUpdate() {
    console.log('componentWillUpdate', '组件即将更新');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate', '组件已经更新');
  }
  componentWillUnmount() {
    console.log('componentWillUnmount', '组件即将卸载');
  }
  render () {
    console.log(2, 'render', '渲染组件ing...');
    return (
      <div>
        <NavLink to="/" activeClassName="aaa">返回首页</NavLink>
        <NavLink to="/fathercom" activeClassName="aaa">父组件页</NavLink>
        <NavLink to="/soncom" activeClassName="aaa">子组件页</NavLink>
        <p>父组件：{this.state.num}</p>
        <button onClick={this.addNum.bind(this)}>+1</button>
        <button onClick={this.toggleSonCom.bind(this)}>toggle</button>
        <p>子组件传来的数据：{this.state.sonInfo}</p>
        {/* 子传父首先由父组件传给子组件一个函数，在子组件中调用函数，数据作为参数传给父组件 */}
        {/* 子传父时，如果要修改父组件的数据，需要先bind(this) */}
        {/* ref的概念和租用与vue中的ref一样。先获取dom节点，目的是操作dom节点 */}
        {/* <p ref="p1">通过ref获取这个节点，方法1</p> */}
        <p ref={(el)=>{this.el = el}}>通过ref获取这个节点，方法2</p>
        <p ref={this.p3}>通过ref获取这个节点，方法3</p>
        {this.state.isShow
          ?
          <SonCom
            info1={this.state.msg}
            info2={this.state.num}
            info3={this.carFn.bind(this)}
          ></SonCom>
          :
          ''}
      </div>
    )
  }
}
export default FatherCom